<template>
  <view class="contain">
     <view>
	</view>
    <view>
      <u-toast ref="uToast" />
    </view>
    <view class="top-content" >
      <view class="top" >
      <u-input style="background-color:white" v-model="value"  suffixIcon="search" :border="true"  placeholder="请输入产品代码" :clearable="true" />
      <!-- <view > -->
         <u-button
        type="primary"
        size="mini"
        class=" search "
        style="margin-left:5rpx;margin-top:5rpx"
        @click="search"
      >查询
      </u-button>
       <u-button
        type="primary"
        size="mini"
        class=" btn1 "
        style="margin-left:5rpx;margin-top:5rpx"
        @click="cancel"
      >重置
      </u-button>
       <img src="" >
    </view>
    
    </view>
    <view v-if="dataList.length<1">
           <table style="border-collapse: collapse;border:0px solid "  width="100%" cellspacing="0">
             <tr style="border:0px solid">
               <th style="color: gray;border:0px solid">暂无数据</th>
             </tr>
          </table>
        </view>
        <view v-else style="padding:10rpx 30rpx">
          <table style="border-collapse: collapse;border-color: black;border:0px solid "  width="100%" cellspacing="0">
              <tr  style=" background-color: #0070C0;">
                <th class="thcolor">计划名称</th>
                <th  class="thcolor">开始时间</th>
                <th  class="thcolor">结束时间</th>
                <th  class="thcolor">异常状况</th>
                <th  class="thcolor">处理方式</th>
              </tr>
              <tr v-for="(item,index) in dataList" :key="index">  
                <td>{{item.name}}</td>
                <td>{{item.startTime}}</td>
                <td>{{item.endTime}}</td>
                <td>{{item.type+'-'+item.item}}</td>
                <td :style="item.way ?'color:blue' :'color:red'" @click="handle(item)">{{item.way ? '已处理' : '未处理'}}</td>
              </tr>
          </table>
        </view>
     <!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
     	<view>
		<u-modal v-model="show" :show-title='false' :mask-close-able="true" :title-style="{color: 'red'}">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
    
		</u-modal>
	</view>
  </view>
</template>

<script>
import { deviceHistory } from "@/api/index.js";
export default {
  onLoad(val) {},
  onShow() {

  },
  data() {
    return {
      value: null,
      dataList: [],
      show: false,
      content: `
					暂无数据
				`
    };
  },
  watch: {
    value: {
      // 可以监听对象的单个属性
      handler(newval, oldval) {
        // console.log('111111')
        // this.getList();
      },
      deep: true
    }
  },
  methods: {
    search() {
      this.getList();
    },
    getList() {
      uni.showLoading({
        title: "加载中"
      });
      const data = {
        sn: this.value
      };
      deviceHistory(data).then(res => {
        console.log(res)
        this.dataList=res.data
      })
      uni.hideLoading();
    },
    modelclick() {
      console.log("dss");
      // this.modelshow = true;
    },
    cancel() {
      this.value = "";
      this.dataList = [];
    },
    handle(e) {
      if (e.way) {
        this.show = true;
        if (e.way == "内部处理") {
          if (e.dealType == "产品更换") {
            // console.log('11111111')
            this.content=e.way+'——'+e.dealType+`<br>`+'更换时间：'+e.replaceTime+`<br>制造单位：`+e.makeUnit+`<br>更换原因：`+e.replaceReason+`<br>产品代码：`+e.dealSn+`<br>检查人：`+e.nickName;
          } else if (e.dealType == "产品修复") {
            if(e.photoRecord){
            this.content=e.way+'——'+e.dealType+`<br>`+'更换时间：'+e.replaceTime+`<br>修复部门：`+e.repairDept+`<br>修复方法：`+e.repairWay+`<br>拍照记录： <img style="width:20%;height:20%" src="`+this.fileUrl+e.photoRecord+`"><br>检查人：`+e.nickName;
            }else {
            this.content=e.way+'——'+e.dealType+`<br>`+'更换时间：'+e.replaceTime+`<br>修复部门：`+e.repairDept+`<br>修复方法：`+e.repairWay+`<br>拍照记录：暂无图片 <br>检查人：`+e.nickName;
            }
          } else if (e.dealType == "继续使用") {
            this.content=e.way+'——'+e.dealType+`<br>检查人：`+e.nickName;
          }
        } else if (e.way == "外部处理") {
          if (e.dealType == "报废与更换") {
            this.content=e.way+'——'+e.dealType+`<br>`+'更换时间：'+e.replaceTime+`<br>制造单位：`+e.makeUnit+`<br>更换原因：`+e.replaceReason+`<br>产品代码：`+e.dealSn+`<br>检查人：`+e.nickName;
          } else if (e.dealType == "修复") {
            if(e.photoRecord){
            this.content=e.way+'——'+e.dealType+`<br>`+'修复地点：'+e.dealTypeMsg+'<br>更换时间：'+e.replaceTime+`<br>修复部门：`+e.repairDept+`<br>修复方法：`+e.repairWay+`<br>拍照记录： <img style="width:20%;height:20%" src="`+this.fileUrl+e.photoRecord+`"><br>检查人：`+e.nickName;
            }else {
            this.content=e.way+'——'+e.dealType+`<br>`+'修复地点：'+e.dealTypeMsg+'<br>更换时间：'+e.replaceTime+`<br>修复部门：`+e.repairDept+`<br>修复方法：`+e.repairWay+`<br>拍照记录： 暂无图片<br>检查人：`+e.nickName;
            }
          } else if (e.dealType == "继续使用") {
            this.content=e.way+'——'+e.dealType+`<br>检查人：`+e.nickName;
          }
        } else if (e.way == "不做处理") {
          this.content=e.way+`<br>检查人：`+e.nickName;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.contain {
  background-color: #f4f9fa;
  width: 100%;
  height: 100%;
  position: relative;
}
.slot-content {
  padding: 40rpx
}
.top-content {
  height: 150upx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.top {
  z-index: 10;
  position: absolute;
  padding: 30rpx 30rpx 18rpx 30rpx;
  width: 100%;
  top: 48rpx;
  background-color: #f4f9fa;
  display: flex;
  border-radius: 40rpx 40rpx 0 0;

  .btn {
    position: absolute;
    border-radius: 16rpx;
    background-color: white !important;
  }
  .btn1 {
    position: absolute;
    right: 30rpx;
    border-radius: 16rpx;
  }
  .search {
    position: absolute;
    right: 130rpx;
    border-radius: 16rpx;
  }
  /deep/ .u-btn--primary {
    background: linear-gradient(to left, #1040be, #026dff);
  }
  /deep/ .uni-input-placeholder {
    font-size: 22rpx;
    color: #989898 !important;
  }
  /deep/ .u-mode-plain-primary {
    border: 1px solid #eee;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
    color: #989898;
  }
  /deep/ .u-flex {
    margin-right: 80rpx;
  }
  .image {
    position: absolute;
    width: 28rpx;
    height: 34rpx;
    left: 45rpx;
  }
  /deep/ .u-size-default {
    padding: 18rpx 24rpx 18rpx 50rpx;
  }
  /deep/ .u-input--border {
    border: 1px solid #eee !important;
    box-shadow: 0 0 20rpx #eee;
    border-radius: 16rpx;
  }
  /deep/ .u-input__input {
    min-height: 55upx !important;
    color: #989898 !important;
  }
}
.contain {
  .card {
    width: 100%;
    margin-top: 84rpx;
  }
  .body {
    .text {
      position: relative;
      // margin-top: 10rpx;
      padding-top: 10rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 34rpx;
      .right {
        position: absolute;
        top: 6px;
        right: 30rpx;
        color: #777;
      }
    }
    .photo {
      // margin-top: 50rpx;
      padding-top: 60rpx;
      display: flex;
      height: 200rpx;

      .cont {
        flex: 1;
        .center {
          text-align: center;
        }
        .text {
          text-align: center;
          font-size: 28rpx;
          color: #111;
        }
      }
    }
  }
  .box-contet {
    width: 100%;
    height: calc(100% - 180upx);
    overflow-y: auto;
    margin-top: 20rpx;
    .cardlist {
      height: 100%;
      .swiper-item {
        height: 100%;
      }
    }
  }
  .list {
    width: 100%;
    padding: 30rpx;
    .color {
    }
  }
  .bottom {
    .title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin-top: 10px;
    }
    .input {
      width: 100%;
      padding: 20rpx 50rpx 10rpx;
    }
    .foot {
      display: flex;
      .btn {
        flex: 1;
        margin: 60rpx 50rpx 0rpx;
      }
    }
  }
}
/deep/ .u-swipe-del {
  left: 4rpx;
  margin-bottom: 20rpx;
  border-radius: 25rpx;
}
/deep/ .u-swipe-view {
  width: 100%;
}

/deep/ .u-mode-center-box {
  height: initial !important;
}
/deep/ .uni-scroll-view {
  height: initial !important;
  margin: 10px 4px;
}
/deep/ .content-clear-icon {
  font-size: 32rpx;
}
/deep/ .uni-easyinput__content {
  background-color: white;
}
.bottombox {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  // background-color: rgba(16, 91, 245, 74%);
  // border-radius: 20px;
  color: blue;
  width: 70rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 160rpx;
  bottom: 8.5%;
}

.bottombox1 {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  // background-color: rgba(16, 91, 245, 74%);
  border-radius: 20px;
  color: blue;
  width: 70rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 90rpx;
  bottom: 8.5%;
}
.slot-content {
  font-size: 32rpx
}
tr {
  border: 1px solid black;
 
}
td {
  border: 1px solid black;
  
}
th {
  border: 1px solid black;

  font-weight: 800;
  color: #1040be;
}
.bottombox2 {
  margin-top: 15rpx;
  width: 100%;
  height: 50rpx;
  position: absolute;
  // background-color: rgba(16, 91, 245, 74%);
  // border-radius: 20px;
  color: white;
  width: 70rpx;
  display: flex;
  align-items: center; /*垂直居中 */
  justify-content: center;
  right: 20rpx;
  bottom: 14%;
}
.thcolor {
  color:white
}
</style>
